<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-row>
      <el-col :span="6" :offset="18">
        <el-button
          type="danger"
          @click="deleteSelected(false)"
          size="mini"
          >
          删除选中
        </el-button>
        <el-button
          type="primary"
          @click="addRow"
          size="mini"
          >
          新增一条
        </el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      height="500"
      :data="tableList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button size="mini" @click="editSelected(scope.$index)" type="text">修改</el-button>
        <el-button size="mini" @click="deleteSelected(scope.row.index)" type="text">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="index"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="tel"
      label="电话"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="count">
  </el-pagination>
  <el-dialog
    title="修改信息"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form v-model="tableInnerForm">
      <el-form-item label="序号">
        <el-input v-model="tableInnerForm.index"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="tableInnerForm.address"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="tableInnerForm.tel"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="changeItem">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data () {
    return {
      list: [
        {index: 1},
        {index: 2},
        {index: 3},
        {index: 4},
        {index: 5},
        {index: 6},
        {index: 7},
        {index: 8},
        {index: 9},
        {index: 10},
        {index: 11},
        {index: 12},
        {index: 13},
        {index: 14},
        {index: 15},
        {index: 16}
      ],
      tableList: [],
      currentPage: 0,
      pageSize: 0,
      count: 0,
      dialogVisible: false,
      tableInnerForm: {
        index: '', // 提前写好就不用考虑用 this.$set 的方法了
      },
      cacheRowIndex: '',
      dialogModel: ''
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log('选中的数组', val)
    },
    handleSizeChange (val) { // 固定套路
      this.getList(1, val)
    },
    handleCurrentChange (val) { // 固定套路
      this.getList(val, this.pageSize)
    },
    getList (page = 1, pageSize = 5) {
      // 固定套路
      let count = this.list.length // res.count
      this.currentPage = Math.min(Math.ceil(count / pageSize), page)
      this.pageSize = pageSize
      // 前端分页 start
      this.tableList = this.list.slice((this.currentPage - 1) * pageSize, (this.currentPage - 1) * pageSize + pageSize)
      this.count = this.list.length
      // 前端分页 end
      // 后端分页 start
      // this.tableList = res.list
      // this.count = res.count
      // 后端分页 end
    },
    // 修改选中
    editSelected (index) {
      this.dialogModel = 'edit'
      this.cacheRowIndex = index + (this.currentPage - 1) * this.pageSize
      this.tableInnerForm = JSON.parse(JSON.stringify(this.tableList[index])) // 深克隆
      this.dialogVisible = true
    },
    changeItem () {
      if (this.dialogModel === 'edit') {
        this.list[this.cacheRowIndex] = this.tableInnerForm
        this.dialogVisible = false
        this.$message.success('修改成功！')
      } else {
        this.list.push(this.tableInnerForm)
        this.dialogVisible = false
        this.$message.success('添加成功！')
      }
      this.getList(1, this.pageSize)
    },
    // 删除选中
    deleteSelected (index) {
      this.$confirm('此操作将删除选中数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (index !== false) {
          this.list = this.list.filter(item => item.index !== index)
          this.getList(this.currentPage, this.pageSize)
        } else if (index === false) {
          this.list = this.list.filter(item => {
            let status = false
            this.multipleSelection.forEach(element => {
              if (element.index === item.index) {
                status = true
              }
            })
            if (status === false) {
              return item
            }
          })
          this.getList(this.currentPage, this.pageSize)
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })   
      })
    },
    addRow () {
      this.tableInnerForm = { // 重置表单
        index: '',
        address: '',
        tel: ''
      }
      this.dialogModel = 'add'
      this.dialogVisible = true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getList()
    })
  }
}
</script>
